<!DOCTYPE html>
<html lang="en">
<head>
    <title>服务到期查询</title>
    <#include "/include/header.ftl">
    <link rel="stylesheet" href="/static/css/ContentSytle.css">


    <!--树形菜单引用-->
    <link rel="stylesheet" type="text/css"  href="/static/js/X-admin/lib/ztree-select-search/css/bootstrapStyle/bootstrapStyle.css" />
    <link rel="stylesheet" type="text/css" href="/static/js/X-admin/lib/ztree-select-search/css/zTreeSelect.css" />
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.exhide.min.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/zTreeSelect.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/TreeSelect.js"></script>


</head>
<body class="tablebody">
<div class="Container">
    <!--表格内容-->
    <div class="TableCont">
        <div class="TableColme">
            <form class="layui-form" action="">
                <!--搜索-->
                <div class="tableSearch">
                    <input type="search" id="TableSearch" class="layui-input" placeholder="卡号，IDDID号"/>
                    <button type="button" id="SearchBtn">搜索</button>
                </div>
                <!--搜索 end-->
                <!--筛选-->
                <div class="tableFilter" id="tableFilter">
                    <a href="javascript:;" class="tit">筛选器</a>
                    <div class="FilterCont" id="FilterCont">
                        <ul>

                            <li>
                                <div class="title">渠道</div>
                                <div class="inputCont" id="zTreeSelect">
                                    <div class="zTreeSelect" style="width:100%;" zTreeSelect-search-field="name">
                                        <input type="hidden" id="qudaoInput" class="zTreeSelect-hidden" value="" autocomplete="off"/>
                                        <input type="text" class="zTreeSelect-text" id="qudaoSelect" zTreeSelect-text-field="name" autocomplete="off" placeholder="全部">
                                        <span class="zTreeSelect-arrow arrow-down">&nbsp;</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="title">运营商</div>
                                <div class="inputCont select">
                                    <select>
                                        <option value="">全部</option>
                                        <option value="移动">移动</option>
                                        <option value="联通">联通</option>
                                        <option value="电信">电信</option>
                                    </select>
                                </div>
                            </li>

                            <li>
                                <div class="title">状态</div>
                                <div class="inputCont select">
                                    <select name="zhuangtai" xm-select="select5" xm-select-height="32px" ></select>
                                </div>
                            </li>

                            <li>
                                <div class="title">服务到期时间</div>
                                <div class="inputCont"><input type="text" class="layui-input Time" id="Time-jh" placeholder="请选择时间段" autocomplete="off"></div>
                            </li>
                        </ul>
                        <div class="FilterBtnCont">
                            <button type="reset" class="btn-min btnNone" id="FilterClearBtn">清除</button>
                            <button type="reset" class="btn-min" id="FilterCancelBtn">取消</button>
                            <button type="button" class="btn-min btn-Orange" id="FilterBtn">筛选</button>
                        </div>

                    </div>
                </div>
                <!--筛选 end-->
            </form>
            <!--操作-->
            <div class="tableOperating" id="tableOperating">
                <h3>操作</h3>
                <div class="OperatingList" id="OperatingList">
                    <ul>
                        <li>
                            <h3><a href="javascript:;" id="daochu">导出</a></h3>
                        </li>
                    </ul>
                </div>
            </div>
            <!--操作 end-->

            <!--表格字段显示选择-->
            <div class="TableRow">
                <a href="javascript:;">显示字段</a>

            </div>
            <!--表格字段显示选择 end-->


            <!--表格独立分页 -->
            <div class="tablePage" id="TablePage"></div>
            <!--表格独立分页-->


        </div>
        <!--表格数据-->
        <table class="layui-table layui-hide"  lay-even="" lay-skin="row" id="TableData" lay-filter="TableData"></table>
        <!--表格数据 end-->

    </div>
    <!--表格内容 end-->
</div>
<#include "/include/footer.ftl">



<script type="text/javascript">
    layui.use(['laydate','table','laypage','form','formSelects'], function(){
        var table = layui.table;laydate = layui.laydate;form = layui.form;laypage = layui.laypage;formSelects = layui.formSelects;
        var heightTable= $('.page-content', window.parent.document).outerHeight(true)-145;
        //表格数据
        table.render({
            elem: '#TableData'
            ,height: heightTable
            ,limit:30
            , even:true
            ,toolbar: 'filter'
            ,defaultToolbar: ['filter']
            ,page:{
                limit:30//每页显示条数
                ,layout: ['count','prev','skip','next', 'refresh']
                ,prev: '<em>◀</em>'
                ,next: '<em>▶</em>'
            }
            ,cols: [[
                //表头
                {type:'checkbox',width:40}
                ,{field:'qudao',title:'渠道',width:200}
                ,{field:'kahao',title:'卡号',width:200}
                ,{field:'ICCID',title:'ICCID',width:200}
                ,{field:'zhuangtai',title:'状态'}
                ,{field:'yunyingshang',title:'运营商'}
                ,{field:'dangyueyongliang',title:'当月用量',width:140}
                ,{field:'taocanmingcheng',title:'套餐名称'}
                ,{field:'zidingyitaocanmingcheng',title:'自定义套餐名称'}
                ,{field:'xiaoshoudanhao',title:'销售单号',width:140}
                ,{field:'jihuoshijian',title:'激活时间',width:140}
                ,{field:'fuwudaoqishijian',title:'服务到期时间',width:140}

            ]]
            ,data:[
                //表格数据
                {
                    "qudao":'唐宁',
                    "kahao":'861064684295101',
                    "ICCID":'89860617080036919254',
                    "zhuangtai":'已激活',
                    "yunyingshang":'联通',
                    "dangyueyongliang":'2018-01-24 16:25:16',
                    "taocanmingcheng":'套餐名称',
                    "zidingyitaocanmingcheng":'套餐名称',
                    "xiaoshoudanhao":'套餐名称',
                    "jihuoshijian":'2018-01-24 16:25:16',
                    "fuwudaoqishijian":'2018-01-24 16:25:16'
                },
                {
                    "qudao":'唐宁',
                    "kahao":'861064684295101',
                    "ICCID":'89860617080036919254',
                    "zhuangtai":'已激活',
                    "yunyingshang":'联通',
                    "dangyueyongliang":'2018-01-24 16:25:16',
                    "taocanmingcheng":'套餐名称',
                    "zidingyitaocanmingcheng":'套餐名称',
                    "xiaoshoudanhao":'套餐名称',
                    "jihuoshijian":'2018-01-24 16:25:16',
                    "fuwudaoqishijian":'2018-01-24 16:25:16'
                },
                {
                    "qudao":'唐宁',
                    "kahao":'861064684295101',
                    "ICCID":'89860617080036919254',
                    "zhuangtai":'已激活',
                    "yunyingshang":'联通',
                    "dangyueyongliang":'2018-01-24 16:25:16',
                    "taocanmingcheng":'套餐名称',
                    "zidingyitaocanmingcheng":'套餐名称',
                    "xiaoshoudanhao":'套餐名称',
                    "jihuoshijian":'2018-01-24 16:25:16',
                    "fuwudaoqishijian":'2018-01-24 16:25:16'
                },
                {
                    "qudao":'唐宁',
                    "kahao":'861064684295101',
                    "ICCID":'89860617080036919254',
                    "zhuangtai":'已激活',
                    "yunyingshang":'联通',
                    "dangyueyongliang":'2018-01-24 16:25:16',
                    "taocanmingcheng":'套餐名称',
                    "zidingyitaocanmingcheng":'套餐名称',
                    "xiaoshoudanhao":'套餐名称',
                    "jihuoshijian":'2018-01-24 16:25:16',
                    "fuwudaoqishijian":'2018-01-24 16:25:16'
                },
                {
                    "qudao":'唐宁',
                    "kahao":'861064684295101',
                    "ICCID":'89860617080036919254',
                    "zhuangtai":'已激活',
                    "yunyingshang":'联通',
                    "dangyueyongliang":'2018-01-24 16:25:16',
                    "taocanmingcheng":'套餐名称',
                    "zidingyitaocanmingcheng":'套餐名称',
                    "xiaoshoudanhao":'套餐名称',
                    "jihuoshijian":'2018-01-24 16:25:16',
                    "fuwudaoqishijian":'2018-01-24 16:25:16'
                }

            ]
        });

        //筛选器检索
        $('#FilterBtn').click(function () {
            $('.tableFilter').removeClass('open');
            layer.msg('暂无数据！');
        });

        //搜索框点搜索
        $('#SearchBtn').click(function () {
            layer.msg('暂无数据！')
        });

        //搜索框回车搜索
        $("#TableSearch").keypress(function (e) {
            layer.msg('暂无数据！')
        });

        //初始化渠道菜单
        var setting = {
            view : {dblClickExpand : false, selectedMulti : false, showIcon : true, filter:true, fontCss : getFontCss},
            check: {chkStyle : "checkbox", enable : false},
            data : {simpleData : {enable : true}},
            callback : {onClick : zTreeOnClick, onCheck : zTreeOnClick}
        };
        $(function () {$("#qudaoSelect").zTreeSelect(setting, zNodes);});

        laydate.render({elem: '#Time-jh',format: 'yyyy.MM.dd',range: '-'});//激活时间
        //导出
        $('#daochu').click(function () {
            top.layer.open({
                type:1,
                fix: false, //不固定
                maxmin: true,
                move:false,
                area:'450px',
                btnAlign: 'r',
                skin:'layerTips',
                shade:0.2,
                title:false,
                closeBtn:0,
                content: "" +
                    "<div class='layerOpenCont'>" +
                    "<div class='Layer-txt'>" +
                    "<h3>您确定要导出数据吗？</h3>" +
                    "<p>因导出的数据量过大导致运行缓慢，请耐心等待</p>" +
                    "</div>" +
                    "</div>",
                btn:['取消','确定'],
                btn2:function () {
                    top.successBtn('导出成功','您导出的文件太大，已生成下载任务，请稍后在下载列表里下载导出文件')//成功提示
                    return false
                }

            })

        })


        //
        $(document).on('click','#FilterClearBtn',function () {
            formSelects.delete('select5', false);
        });
        formSelects.render({
            name:'select5',
            type:2,
            maxTips:3,
            on:function (data,arr) {
                //监听选择
                //console.log(data);
                console.log(arr);
            },
            data:{
                arr:[
                    {content:'测试期',value:1,sel:false},
                    {content:'沉默期',value:2,sel:false},
                    {content:'未激活',value:3,sel:false},
                    {content:'已激活',value:4,sel:false},
                    {content:'停机',value:5,sel:false},
                    {content:'报警',value:6,sel:false},
                    {content:'已失效',value:7,sel:false},
                    {content:'已销户',value:8,sel:false}
                ],
                name:'content',
                val:'value',
                selectd:'sel'
            }
        })

    })
</script>

</body>
</html>
